<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <style>
        .comment_address {
            padding: 3px 5px;
            color: #fd7e14;
            background-color: #fff4e6;
            border-radius: 5px;
        }
    </style>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Jungshen的博客是一个IT知识分享博客。欢迎来到我的个人博客！这是一个专注于IT领域的博客，涵盖了人工智能、大数据、云计算、网络安全、软件开发等各个热门话题。我将与您分享最新的技术趋势、解决方案、实用教程和见解，帮助您更好地理解和应用IT技术。通过我的博客，我希望能够激发思考，促进技术与社会的融合，共同探索IT领域的无限可能性。欢迎您的访问和互动，期待与您一起分享和探讨IT领域的精彩世界！">
    <meta name="keywords" content="Jungshen的博客,开发者,程序员,Jungshen,程序猿,程序媛,极客,码农,编程,代码,软件开发,IT网站,技术社区,Developer,Programmer,Coder,Geek,Coding,Code">
    <meta name="author" content="Jungshen">
    <title>留言版 - Jungshen的博客</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css?v=3.3.7}"/>
    <link rel="stylesheet" th:href="@{/blog/mblog/css/icon.css}"/>
    <link rel="stylesheet" th:href="@{/blog/mblog/css/web-common.css}"/>
    <link rel="stylesheet" th:href="@{/blog/mblog/css/web-blog.css}"/>
    <th:block th:include="include :: semantic-css"/>
    <th:block th:include="include :: me-css"/>
    <th:block th:include="include :: toastr-css"/>
    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
    <script>LA.init({id:"3G2NG1QnSr7iIYWs",ck:"3G2NG1QnSr7iIYWs"})</script>
</head>
<body>
<header id="header">
    <div th:replace="emmanuel/web/navbar :: navbar"></div>
</header>
<div class="pb-container pb-content">
    <div class="pb-main comment">
        <div class="comment-describe">
            <h3 class="comment-describe-title">留言板</h3>
            <div>
                <p>　　欢迎来到我的IT个人博客！在这里，我将与大家分享有趣的科技故事和技术经验，希望能给大家带来一些欢乐和笑声。因为在IT世界，幽默是最好的解药！</p>
                <p>　　我知道，有时候我们在面对电脑bug时会感到无助，就像在迷宫中迷失了方向。但不要担心，我会用幽默的语言和你们一起解决这些问题，让你们在修复bug的过程中开怀大笑！</p>
                <p>　　当然，IT世界也有一些奇怪的现象和搞笑的故事。我会与大家分享那些令人捧腹的经历，让你们在阅读的同时忍不住笑出声来。毕竟，生活已经够严肃了，我们需要一些轻松和快乐！</p>
                <p>　　如果你有任何有趣的故事、搞笑的经历或者想要听到我对某个科技话题的幽默见解，欢迎在留言板上与我互动。我期待着与你们的交流，让我们一起在这个IT世界中开怀大笑！</p>
                <p>　　感谢你们的支持和关注！让我们一起享受IT的乐趣，笑对技术！</p>
            </div>
            <hr class="hr0">
            <div>
                <p>可在此处留言友链。</p>
                <p>内容相近优先，友链格式示例如下：</p>
                <p>博客名：Jungshen的博客</p>
                <p>链接：https://blog.jungshen.cn</p>
                <p>邮箱：adsion_jungshen@qq.com</p>
            </div>
        </div>

        <!--        留言start-->
        <div class="ui bottom attached segment">
            <!-- 留言区域 -->
            <div id="comment-container" class="ui teal segment">
                <div th:fragment="commentList" th:if="${not #lists.isEmpty(comments)}">
                    <!-- 留言列表 -->
                    <div class="ui threaded comments" style="max-width: 100%;">
                        <h3 class="ui dividing header">留言</h3>
                        <div class="comment" th:each="comment : ${comments}">
                            <a class="avatar">
                                <img th:src="(${#strings.isEmpty(comment.avatar)}) ? @{/img/profile.jpg} : @{${comment.avatar}}">
                            </a>
                            <div class="content">
                                <a class="author">
                                    <span th:text="${comment.nickName}">听雨1</span>
                                </a>
                                <div class="metadata">
                                        <span class="date"
                                              th:text="${comment.createTimeFormt}">2020年01月11日17:20:56</span>
                                        <div class="comment_address"
                                              th:if="${not #strings.isEmpty(comment.ipAddr)}"> <span th:text="${comment.ipAddr}"></span> </div>
                                </div>
                                <div class="text" th:utext="${comment.content}">
                                    非常好
                                </div>
                                <div class="actions">
                                    <a class="reply" data-commentid="1" data-commentnickname="听雨1"
                                       th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickName}"
                                       onclick="reply(this)">回复</a>
                                </div>
                            </div>

                            <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                <div class="comment" th:each="reply : ${comment.replyComments}">
                                    <a class="avatar">
                                        <img th:src="(${#strings.isEmpty(reply.avatar)}) ? @{/img/profile.jpg} : @{${reply.avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <span th:text="${reply.nickName}">小红</span>
                                            <div class="ui mini basic blue label m-padded-mini"
                                                 th:if="${reply.adminComment}">博主
                                            </div>
                                            &nbsp;<span th:text="|@ ${reply.parentNickName}|"
                                                        style="color: #00B5AD !important;">@ 小白</span>
                                        </a>
                                        <div class="metadata">
                                                <span class="date"
                                                      th:text="${reply.createTimeFormt}">2020年01月11日17:23:20</span>
                                            <div class="comment_address"
                                                 th:if="${not #strings.isEmpty(reply.ipAddr)}"> <span th:text="${reply.ipAddr}"></span> </div>
                                        </div>
                                        <div class="text" th:text="${reply.content}">
                                            这个我喜欢
                                        </div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="1" data-commentnickname="听雨1"
                                               th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickName}"
                                               onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui bottom attached" th:if="${(total> pageSize)}">
                        <div class="ui meddle aligned two column grid">
                            <div class="column" th:if="${(pageNum>1) && total>pageSize}">
                                <a href="#"
                                   th:onclick="'javascript:getPageData('+(${pageNum} -1)+');'"
                                   class="ui teal basic mini button"
                                >上一页</a>

                            </div>
                            <div class="right aligned column">
                                <a href="#"
                                   th:if="${pageNum<totalPage}"
                                   th:onclick="'javascript:getPageData('+(${pageNum} +1)+');'"
                                   class="ui teal basic mini button"
                                >下一页</a>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <!-- 提交留言 -->
            <div class="ui form">
                <input type="hidden" name="blog.id">
                <input type="hidden" name="parentComment.id" value="0">
                <div class="field">
                    <textarea name="content" placeholder="请输入留言信息..."></textarea>
                </div>
                <div class="fields">
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="ui user icon"></i>
                            <input type="text" name="nickName" placeholder="姓名"
                                   th:value="${session.user}!=null ? ${session.user.nickName}"/>
                        </div>

                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="ui mail icon"></i>
                            <input type="email" name="email" placeholder="邮箱"
                                   th:value="${session.user}!=null ? ${session.user.email}"/>
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i
                                class="edit icon"></i>发布
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!--    侧边栏-->
    <div th:replace="emmanuel/web/sidebar :: sidebar"></div>

</div>

<!--底部-->
<div th:replace="emmanuel/web/footer :: copyrightDark"></div>
<div class="return_top"><a class=" fa fa-arrow-up"></a></div>
</body>
<script th:inline="javascript">var ctx = [[@{/}]];</script>
<script th:src="@{/js/jquery.min.js?v=3.6.3}"></script>
<script th:src="@{/js/bootstrap.min.js?v=3.3.7}"></script>
<th:block th:include="include :: semantic-js"/>
<script th:src="@{/blog/mblog/js/tagcloud.js}"></script>
<script th:src="@{/blog/mblog/js/hc-sticky.js}"></script>
<script th:src="@{/blog/mblog/js/pb-blog.js}"></script>
<th:block th:include="include :: toastr-js"/>
<!-- https://github.com/leizongmin/js-xss -->
<script th:src="@{/blog/mblog/js/xss.min.js}"></script>
<script th:inline="javascript">

    //留言表单验证
    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入留言内容'
                }, {
                    type: 'maxLength[1000]',
                    prompt: '干啥呢，长篇大论，这不是你撒野的地方'
                }]
            },
            content: {
                identifier: 'nickName',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的大名'
                }, {
                    type: 'minLength[2]',
                    prompt: '昵称最少2个字符'
                }, {
                    type: 'maxLength[10]',
                    prompt: '昵称不能超过10个字符'
                }]
            },
            type: {
                identifier: 'email',
                rules: [{
                    type: 'email',
                    prompt: '请填写正确的邮箱地址'
                }]
            }
        }
    });

    //提交留言
    $("#commentpost-btn").click(function () {
        var bool = $('.ui.form').form("validate form");
        if (bool) {
            postData();
        } else {
            let nickName = $("[name='nickName']").val();
            if (nickName && (nickName.length < 2 || nickName.length > 10)) {
                toastr.error("昵称长度保持2到10个字符");
                return;
            }
            let content = $("[name='content']").val();
            if (content && (content.length < 0 || content.length > 1000)) {
                toastr.error("干啥呢，长篇大论，这不是你撒野的地方");
                return;
            }
            toastr.error("请检查信息是否填写完整/正确");
        }
    });

    //提交数据方法
    function postData() {
        $.ajax({
            url: '/blog/message/submitMessage',
            cache: false,
            data: {
                "pId": $("[name='parentComment.id']").val(),
                "nickName": $("[name='nickName']").val(),
                "email": $("[name='email']").val(),
                "content": filterXSS($("[name='content']").val()),
                "postId": "0"
            },
            type: 'post',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            success: function (data) {
                toastr.clear();
                if (data.code == 0) {
                    toastr.success(data.msg)
                } else {
                    toastr.warning(data.msg)
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (XMLHttpRequest.status == 403) {
                    toastr.error("您没有权限访问，请联系管理员！")
                } else if (XMLHttpRequest.status == 500) {
                    toastr.error("服务器内部错误！")
                } else if (XMLHttpRequest.status == 404) {
                    toastr.error("您访问的内容不存在！")
                } else {
                    toastr.error("服务器未知异常！")
                }
            }
        });
    }

    // 清理留言内容
    function clearContent() {
        $("[name='content']").val('');
        $("[name='parentComment.id']").val('0');
        $("[name='content']").attr("placeholder", "请输入留言信息...");
    }

    //回复方法
    function reply(obj) {
        var commentid = $(obj).data("commentid");
        var commentNickname = $(obj).data("commentnickname");
        $("[name='content']").attr("placeholder", "@" + commentNickname).focus();
        $("[name='parentComment.id']").val(commentid);
    }

    //初始加载留言
    getPageData();

    // 分页
    function getPageData(pageNum) {
        $(function () {
            $("#comment-container").load(/*[[@{/blog/message/messageInfo}]]*/"", {
                "pageNum": (pageNum == null ? 1 : pageNum),
                "pageSize": 10,
            }, function (responseTxt, statusTxt, xhr) {
                if (responseTxt != '' && responseTxt != null) {
                    // 判断是否以 { 开头,以此判断是否是JSON字符串
                    if (responseTxt.substring(0, 1) == "{") {
                        var json = JSON.parse(responseTxt);
                        if (json.code == 500) {
                            toastr.error(json.msg)
                        }
                    } else {
                        clearContent();
                    }
                }

            });
        });
    }

</script>

</html>
